<template>
  <el-calendar v-model="value">
    <template slot="dateCell" slot-scope="{date, data}">
      <div @click="changeDayInfo(data.day)">
        <div style="font-size: 24px;color: royalblue;">{{ data.day.split('-').slice(1).join('-') }}</div>
        <span v-if="getDayInfo(data.day)=='周末'" class="zhoumo">{{ getDayInfo(data.day) }}</span>
        <span v-if="getDayInfo(data.day)=='工作日'" class="gongzuori">{{ getDayInfo(data.day) }}</span>
        <span v-if="getDayInfo(data.day)=='节假日'" class="jiejiari">{{ getDayInfo(data.day) }}</span>
      </div>

    </template>
  </el-calendar>
</template>

<script>
import { websock } from '@/websock'
export default {
  data() {
    return {
      value: new Date(),
      jiejiariConf: {}
    }
  },
  async created() {
    try {
      this.jiejiariConf = await websock.getJiejieriConfig()
    } catch (err) {
      console.error(err)
      this.$message.error(err.message || 'error')
    }
  },
  methods: {
    // 在此处直接修改数据typ值如果是1就变0，如果是0就变1
    changeDayInfo(day) {
      console.log('riqi', day)
      if (!this.jiejiariConf[day]) return
      if (this.jiejiariConf[day].typ == 0) {
        this.jiejiariConf[day].typ = 1
        websock.updateJiejiariConfig({ riqi: day, typ: 1 })
      } else if (this.jiejiariConf[day].typ == 1) {
        this.jiejiariConf[day].typ = 2
        websock.updateJiejiariConfig({ riqi: day, typ: 2 })
      } else if (this.jiejiariConf[day].typ == 2) {
        this.jiejiariConf[day].typ = 0
        websock.updateJiejiariConfig({ riqi: day, typ: 0 })
      }
    },
    // 在此处查询数据库的值,根据typ值返回休息还是工作日
    getDayInfo(day) {
      console.log('get day info', day)
      console.log('get day info', this.jiejiariConf[day])
      if (!this.jiejiariConf[day]) return '无数据'

      if (this.jiejiariConf[day].typ == 1) return '周末'

      if (this.jiejiariConf[day].typ == 2) return '节假日'

      return '工作日'
    }
  }
}
</script>

<style>
.gongzuori{
  font-size: 22px;
  /* font-style: italic; */
}
.zhoumo{
  color: indianred;
  font-size: 22px;
}
.jiejiari{
  color: rgb(210, 41, 154);
  font-size: 22px;
}
</style>
